<template>
  <div>
    <div class="navbar-div" >
      <van-nav-bar   title="类别列表" />
      <!-- fixed固定在头部 加van-nav-bar -->
    </div>
    <!-- 大类侧边栏及右边列表局部 -->
    <van-row>
        <van-col span="6">
            <div id="leftNav">
                <ul>
                  <li @click='clickCategory(index,item.ID)' :class="{'categoryActive':categoryIndex==index}" v-for="(item,index) in category" :key='index'>
                    <!--只有一个条件时的写法，这个不能写多个 :class="{categoryActive:catagoryIndex==index} -->
                    <!--三元写法 :class="[categoryIndex==index?'categoryActive':'']" -->
                    {{item.MALL_CATEGORY_NAME}}
                  </li>
                </ul>
            </div>
        </van-col>
        <van-col span="18">
          <!-- 二级分类 S-->
            <div class="tabCategorySub">
                <van-tabs v-model="active" @click='onClickCategorySub'>
                    <van-tab v-for="(item, index) in categorySub"  :key="index" :title="item.MALL_SUB_NAME">
                    </van-tab>
                </van-tabs>
            </div>
          <!-- 二级分类E -->
          <!-- 商品列表 -->
            <div id="list-div">
              <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    @load="onLoad"
                    >
                    <!-- onLoad一进这个页面就回执行 -->
                    <!-- finished 上拉加载，是否没有更多数据了，理解这句话 -->
                    <!-- <div class="list-item" @click='onClickCategorySub(item.ID)' v-for="item in list" :key="item">
                        {{item}}
                    </div> -->

                    <div class="list-item" @click='goGoods(item.ID)' v-for="(item,index) in goodList" :key="index">
                        <div class="list-item-img"><img :src="item.IMAGE1" width="100%" :onerror='errorImg'/></div>
                        <div class="list-item-text">
                            <div>{{item.NAME}}</div>
                            <div class="">￥{{item.PRESENT_PRICE | Money}}</div>
                        </div>
                    </div>

                </van-list>
              </van-pull-refresh>
            </div>
          <!-- 商品列表E -->
        </van-col>
    </van-row>
  </div>
</template>

<script>
  import axios from 'axios'
  import url from '@/serviceAPI.config.js'
  import {toMoney} from '@/filter/moneyFilter.js'  //过滤器
  export default {
    data() {
      return {
        category: [], //商品列表大类
        categoryIndex:0,  //大类点击反白索引

        categorySub:[],  //小类别
        active:0, //小类别默认选中的分类样式等

        list:[], //小类别下面对应的商品列表
        loading:false, //上拉加载使用
        finished:false, //上拉加载是否没有数据了

        isRefresh:false, //下拉刷新

        page:1,  //商品列表的页数
        goodList:[],  //商品信息
        categorySubid:'', //商品子分类的ID

        errorImg:'this.src="' + require('@/assets/images/errorimg.png') + '"'   ,  //错误图片显示路径
      }
    },
    filters:{
      Money(money){
        return toMoney(money)
      }
    },
    created(){
      this.getCategory()
    },
    mounted(e){
      // 让左侧当前适应页面高度
      let winHeight=document.documentElement.clientHeight
      document.getElementById('leftNav').style.height=winHeight-46-50+'px'
      // 设置list-div的高度，让商品列表有高度  加了底部tabs，解决拉不到底，-50底部高度，即可
      document.getElementById('list-div').style.height=winHeight-90-50+'px'
    },
    methods:{
      // 点击商品，跳转到详情页
      goGoods(id){
        // 下面是通过query传参， 路由跳转通过name，技术胖说用query只能用path，但实际这里也可以这么写，也能获取到  接收页面这样些this.$route.query.goodsId
        // this.$router.push({name:'goods',query:{goodsId:id}})
        // 第二种写法传参，编程式导航
        this.$router.push({name:'goods',params:{goodsId:id}})
        // 上面写法是编程式导航，并且通过name，技术胖说，params传参需要通过name,path不行，这里换path试下真的不行，只能用name,而query是两个都行  接收页面this.$route.params.goodsId
      },
      // 获取商品列表方法
      getGoodList(){
        axios({
          url:url.getGoodsListByCategorySubID,
          method:'post',
          data:{
            categoryId:this.categorySubid,
            page:this.page
          }
        }).then(res=>{
          if(res.data.code==200&&res.data.message){
            if(res.data.message.length==0){  //返回的数据没有呢，就不允许再继续下拉了
              this.finished=true;
            }
            this.goodList=this.goodList.concat(res.data.message)
            this.page++
          }else{
            this.finished=true;
          }
          this.loading=false
        }).catch(err=>{
          console.log(err)
        })
      },
      // 点击子类的方法
      onClickCategorySub(index,title){ //vant的tabs加click事件，是在tabs上加，并且他的参数是这边接收，上面的html是不能传的
        console.log(index)
        this.categorySubid=this.categorySub[index].ID
        // 点击之类，需要做初始化操作，把下面的商品列表都给清空
        this.goodList=[]
        this.finished=false
        this.page=1
        this.onLoad()  //onLoad一开始就会执行，并且是获取商品列表的数据
      },
      // 下拉刷新
      onRefresh(){
        setTimeout(()=>{
          // this.isRefresh=false;
          // this.list=[];
          // this.onLoad()
          // 真实
          this.isRefresh=false
          this.finished=false
          this.goodList=[]
          this.page=1
          this.onLoad()
        },500)
      },
      // 上拉加载更多数据(模拟)
      onLoad(){
        // 模拟
        // setTimeout(()=>{
        //   for(let i=0;i<10;i++){
        //     this.list.push(this.list.length+1)
        //   }
        //   this.loading=false
        //   if(this.list.length>40){
        //     this.finished=true
        //   }
        // },500)

        // 真实
        setTimeout(()=>{
          this.categorySubid=this.categorySubid?this.categorySubid:this.categorySub[0].ID
          this.getGoodList() //调用请求商品列表接口
        },1000)
      },
      // 点击左侧大类，反白效果
      clickCategory(index,categoryID){
        this.categoryIndex=index

        // 点击大类也需要做初始化操作
        this.page=1
        this.finished=false
        this.goodList=[]

        this.getCategorySubByCategory(categoryID)
      },
      // 根据大类ID读取小类列别列表
      getCategorySubByCategory(categoryId){
        axios({
          url:url.getCategorySubList,
          method:'post',
          data:{categoryId:categoryId}
        }).then(res=>{
          // console.log(res,'小分类',categoryId,'categoryId')
          if(res.data.code==200&&res.data.message){
            this.categorySub=res.data.message
            this.active = 0
            // 当点击大类，默认显示的的小类，不请求数据，所以这里做个处理
            // console.log(this.categorySub,888)
            this.categorySubid=this.categorySub[0].ID
            this.onLoad()
          }else{
            Toast('服务器错误，数据获取失败')
          }
        }).catch(err=>{
          console.log(err)
        })
      },
      // 请求商品大类别请求
      getCategory(){
        axios({
          url:url.getCategoryList,
          method:'get'
        }).then((res)=>{
          console.log(res,'商品大类')
          if(res.data.code==200&&res.data.message){
            this.category=res.data.message  //商品大类数据赋值
            // 防止刷新页面一开始没有小分类，所以这里一开始执行获取方法
            this.getCategorySubByCategory(this.category[0].ID)
          }else{
            Toast('服务器错误，数据获取失败')
          }
        }).catch(err=>{
          console.log(err)
        })
      }
    }
  }
</script>

<style scoped>
  #leftNav ul li {
    line-height: 2rem;
    border-bottom:1px solid #E4E7ED;
    padding:3px;
    font-size:0.8rem;
    text-align: center;
  }
  .categoryActive{
    background-color: red;
  }

  /* 商品 */
  /* .list-item{
        text-align: center;
        line-height: 80px;
        border-bottom: 1px solid #f0f0f0;
        background-color: #fff;
    }
    #list-div{
        overflow: scroll;
    } */

  .list-item{
        display: flex;
        flex-direction: row;
        font-size:0.8rem;
        border-bottom: 1px solid #f0f0f0;
        background-color: #fff;
        padding:5px;
    }
    #list-div{
        overflow: scroll;
    }
    .list-item-img{
        flex:8;
    }
    .list-item-text{
        flex:16;
        margin-top:10px;
        margin-left:10px;
    }
</style>
